<template>
  <div class="cart-main">
    <div v-if="cartData.length>0">
      <div class="cart-item" v-for="(item,index) in cartData" :key="item.id">
        <div class="cart-left">
          <div class="select" @click="select(item)">
            <img v-show="!item.isSelect" src="~assets/images/icon/circle@noselected.png" alt />
            <img v-show="item.isSelect" src="~assets/images/icon/circle@selected.png" alt />
          </div>
          <div class="main-img">
            <img :src="item.main_img_url" alt />
          </div>
        </div>

        <div class="cart-rigth">
          <div class="f-j-b">
            <span>{{item.name}}</span>
            <div>¥{{item.price}}</div>
          </div>

          <div class="f-j-b">
            <div>
              <span @click="minus(item)">-</span>
              <span class="cout">{{item.cout}}</span>
              <span @click="add(item)">+</span>
            </div>
            <div @click="del(index)">X</div>
          </div>
        </div>
      </div>

      <div class="f">
        <div class="f-left" @click="allSelect">
          <img v-if="isAllSelect" src="~assets/images/icon/all@selected.png" alt />
          <img v-else src="~assets/images/icon/all.png" alt />
          <span class="selected">全选({{sumNum}})</span>
        </div>
        <div class="f-right" @click="order">
          <span>下单</span>|
          <span>¥{{sumPrice}}</span>
          <img src="~assets/images/icon/arrow@grey.png" alt />
        </div>
      </div>
    </div>
    <div v-else>您还未添加任何商品呢~</div>
  </div>
</template>
<script>
export default {
  name: "cart",
  components: {},
  data() {
    return {
      cartData: [],
      isAllSelect: false,
      sumPrice: 0,
      sumNum: 0
    };
  },
  created() {
    const cart = this.$storage.getStorage("cart");
    this.cartData = cart ? cart : [];

    this.getSumPrice();
  },
  methods: {
    // 计算总价
    getSumPrice() {
      let sumPrice = 0;
      let sumNum = 0;
      this.cartData.forEach(item => {
        if (item.isSelect) {
          sumPrice += item.cout * item.price;
          sumNum++;
        }
      });
      this.isAllSelect = this.cartData.length === sumNum ? true : false;
      this.sumPrice = sumPrice.toFixed(2);
      this.sumNum = sumNum;
    },
    // 选中和取消  item{Object} 当前选中项
    select(item) {
      item.isSelect = !item.isSelect;
      this.$storage.setStorage("cart", this.cartData);
      this.getSumPrice();
    },
    // 删除   index{int}  当前选中的索引
    del(index) {
      this.cartData.splice(index, 1);
      this.$storage.setStorage("cart", this.cartData);
      this.getSumPrice();
    },
    minus(item) {
      if (item.cout < 2) return; //使其为1时不可再减
      item.cout--;
      this.$storage.setStorage("cart", this.cartData);
      this.getSumPrice();
    },
    add(item) {
      item.cout++;
      this.$storage.setStorage("cart", this.cartData);
      this.getSumPrice();
    },
    // 全选和全不选
    allSelect() {
      // 方法一
      let is = true;
      if (this.isAllSelect) {
        is = false;
      }
      this.cartData.forEach(element => {
        element.isSelect = is;
      });
      this.$storage.setStorage("cart", this.cartData);
      // this.isAllSelect = !this.isAllSelect;
      this.getSumPrice();

      // 方法二
      // if (this.isAllSelect) {
      //   // 全不选
      //   this.cartData.forEach(element => {
      //     element.isSelect = false;
      //   });
      // } else {
      //   // 全选
      //   this.cartData.forEach(element => {
      //     element.isSelect = true;
      //   });
      // }
      // this.isAllSelect = !this.isAllSelect;
    },
    order(){
      if(this.sumNum<1){
        alert('请勾选商品')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cart-main {
  font-size: 0.6rem;
  .cart-item {
    display: flex;
    padding: 0 0.5rem;
    border-bottom: 1px solid #ccc;
    .cart-left {
      display: flex;
      align-items: center;
      .select {
        img {
          width: 1rem;
          height: 1rem;
        }
      }
      .main-img {
        width: 3.5rem;
        height: 3.5rem;
        background-color: #f3f5f2;
        margin: 0.3rem;
      }
    }
    .cart-rigth {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .cout {
        margin: 0 0.5rem;
      }
      .f-j-b {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .f {
    position: fixed;
    bottom: 2.6rem;
    width: 100%;
    height: 2.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ab956b;
    color: #fff;
    .f-left {
      display: flex;
      align-items: center;
      margin-left: 0.5rem;
      img {
        width: 1rem;
        height: 1rem;
      }
      .selected {
        margin: 0 0.5rem;
      }
    }
    .f-right {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 45%;
      img {
        width: 0.7rem;
        height: 0.6rem;
      }
    }
  }
}
</style>